<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>向子组件中传递事件并在子组件中调用该事件</title>
    <style>
        .redcolor {
            color: red;
        }
        .greencolor {
            color: green;
        }
    </style>
</head>
<body>
    <div id="app">
        <h1>向子组件中传递事件并在子组件中调用该事件</h1>
        {{msg}}
        <hr></hr>
        <h1 :class="fontcolor">{{msg}}</h1>
        <user-list @ss="changeMsg"></user-list>
    </div>
    <!-- 用户列表组件 -->
     <template id="userList">
         <div>
            <h1>用户列表</h1>
             <ul>
                 <li v-for="item in users">
                     {{item.name}}
                 </li>
             </ul>
             <button @click="aa">修改父组件msg的值</button>
         </div>
         
     </template>
</body>
</html>
<script type="module">
    import {} from './js/vue.js'
    // 用户列表组件
    const userList = {
        template: '#userList',
        data() {
            return {
                users: []
            }
        },
        methods: {
            aa() {
                console.log('修改父组件msg的值')
                //$emit: 向父组件传递事件 ss: 自定义事件名称 mm: 传递给父组件的数据
                this.$emit('ss', '2021高职软件','greencolor')
            },
           getUsers() {
               this.users = [
                   {name: '张三'},
                   {name: '李四'},
                   {name: '王五'},
               ]
           }
        },
        mounted() {
            this.getUsers()
        }
    }
    let app = new Vue({
        el: '#app',
        data: {
            msg:'haha',
            fontcolor:'redcolor'
        },
        methods: {
            changeMsg(mm,color) {
                this.msg = mm,
                this.fontcolor = color
            }
        },
        components: {
            userList
        }
    })
</script>